Sheaf UI

#Introduction

The Navbar component is a horizontal navigation system designed for headers and top-level navigation. It provides a clean, accessible way to organize primary navigation links with support for icons, badges, and active states.

#Installation

Use the sheaf artisan command to install the navbar component:

php artisan sheaf:install navbar

Once installed, you can use the <x-ui.navbar> component in any Blade view.

#Usage

#Basic Navbar

The simplest implementation with navigation items:

<x-ui.navbar>
    <x-ui.navbar.item icon="home" label="Home" href="/" />
    <x-ui.navbar.item icon="document-text" label="Docs" href="/docs" />
    <x-ui.navbar.item icon="users" label="Team" href="/team" />
    <x-ui.navbar.item icon="cog" label="Settings" href="/settings" />
</x-ui.navbar>

#Navbar with Icons

Add visual clarity with leading icons:

<x-ui.navbar>
    <x-ui.navbar.item 
        icon="home" 
        label="Dashboard" 
        href="/dashboard" 
    />
    <x-ui.navbar.item 
        icon="chart-bar" 
        label="Analytics" 
        href="/analytics" 
    />
    <x-ui.navbar.item 
        icon="shopping-cart" 
        label="Orders" 
        href="/orders" 
    />
    <x-ui.navbar.item 
        icon="users" 
        label="Customers" 
        href="/customers" 
    />
</x-ui.navbar>

#Navbar with Badges

Display notifications or counts on navigation items:

<x-ui.navbar>
    <x-ui.navbar.item 
        icon="home" 
        label="Home" 
        href="/" 
    />
    <x-ui.navbar.item 
        icon="envelope" 
        label="Messages" 
        href="/messages"
        badge="5"
        badge:variant="primary"
    />
    <x-ui.navbar.item 
        icon="bell" 
        label="Notifications" 
        href="/notifications"
        badge="12"
        badge:variant="danger"
    />
    <x-ui.navbar.item 
        icon="clipboard-list" 
        label="Tasks" 
        href="/tasks"
        badge="3"
        badge:variant="warning"
    />
</x-ui.navbar>

#Active State Highlighting

Highlight the current active navigation item:

<x-ui.navbar>
    <x-ui.navbar.item 
        icon="home" 
        label="Dashboard" 
        href="/dashboard"
        :active="request()->is('dashboard')"
    />
    <x-ui.navbar.item 
        icon="folder" 
        label="Projects" 
        href="/projects"
        :active="request()->is('projects*')"
    />
    <x-ui.navbar.item 
        icon="chart-bar" 
        label="Reports" 
        href="/reports"
        :active="request()->is('reports*')"
    />
</x-ui.navbar>

#Custom Icon Styling

Customize individual item icons with icon-prefixed attributes:

<x-ui.navbar>
    <x-ui.navbar.item 
        icon="home" 
        label="Home" 
        href="/" 
    />
    <x-ui.navbar.item 
        icon="exclamation-triangle" 
        icon:class="text-red-500"
        label="Alerts" 
        href="/alerts" 
    />
    <x-ui.navbar.item 
        icon="check-circle" 
        icon:class="text-green-500"
        label="Completed" 
        href="/completed" 
    />
</x-ui.navbar>

#Navbar in Header Context

Typical usage within a header component:

<x-ui.header>
    <x-ui.navbar class="flex-1">
        <x-ui.navbar.item icon="home" label="Home" href="/" />
        <x-ui.navbar.item icon="folder" label="Projects" href="/projects" />
        <x-ui.navbar.item icon="users" label="Team" href="/team" />
    </x-ui.navbar>

    <div class="flex items-center gap-x-3">
        <x-ui.avatar src="/user.jpg" circle size="sm" />
        <x-ui.theme-switcher variant="inline" />
    </div>
</x-ui.header>

#Component Props

#Navbar Component

#Navbar Item Component

Note: The navbar.item component also accepts prefixed attributes:

• icon:* - Any attribute prefixed with icon: is passed to the icon component (e.g., icon:class="text-red-500")
• badge:* - Any attribute prefixed with badge: is passed to the badge component (e.g., badge:variant="danger")

#Advanced Examples

#Dynamic Navigation with Livewire

// In your Livewire component
public $navItems = [
    ['icon' => 'home', 'label' => 'Dashboard', 'href' => '/dashboard'],
    ['icon' => 'chart-bar', 'label' => 'Analytics', 'href' => '/analytics'],
    ['icon' => 'folder', 'label' => 'Projects', 'href' => '/projects', 'badge' => 5],
];

<x-ui.navbar>
    @foreach($navItems as $item)
        <x-ui.navbar.item 
            :icon="$item['icon']"
            :label="$item['label']"
            :href="$item['href']"
            :badge="$item['badge'] ?? null"
            :active="request()->is(ltrim($item['href'], '/'))"
        />
    @endforeach
</x-ui.navbar>

#Conditional Navigation Items

<x-ui.navbar>
    <x-ui.navbar.item icon="home" label="Home" href="/" />
    
    @auth
        <x-ui.navbar.item icon="folder" label="My Projects" href="/projects" />
        
        @can('admin')
            <x-ui.navbar.item icon="cog" label="Admin" href="/admin" />
        @endcan
    @endauth
    
    <x-ui.navbar.item icon="question-mark-circle" label="Help" href="/help" />
</x-ui.navbar>

#Bonus

The component automatically responds to a [data-collapsed] attribute on a parent sidebar component for collapsed state styling.

so if you want to add some tailwind based on collapsed or expanded state:

• [:not(:has([data-collapsed]_&))_&]:bg-green-500 : means if the sidebar is not collapsed add green color
• [:has([data-collapsed]_&)_&]:bg-red-500: means if the sidebar is collapsed adds red color